<?php 
	require_once 'loginSuccess.php';
	
	$albums = $dbConnection->getUserAlbums();
	
	function displayAlbumNames($albums) {
		echo "<select name='albums'>";
		while(list($id, $name) = $albums->fetch_row()) {
			echo "<option value='$id'>$name</option>";
		}
		echo "</select>";
	}
	
	if(isset($_POST['uploadImg'])) {
		$image = new Image();
		$image->uploadImgToFileSystem();
		$image->setAlbumId($_POST['albums']);
		$albumId = $image->getAlbumId();
		$dbConnection->uploadImgToDB($image, $albumId);
	}
	
	//TODO: AJAX function addMoreImages() to add additional upload input when the button is clicked.
	
	
?>

<html>
<head>
	<script>
	function addMoreImages() {
		var req = new XMLHttpRequest();
		req.onreadystatechange=function() {
			if (req.readyState == 4 && req.status == 200) {
				document.getElementById("moreImages").innerHTML += req.responseText;
			}
		}
		var params = "";
		req.open("POST","addMoreImagesresp.php", true);
		req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		req.setRequestHeader("Content-length", params.length);
		req.setRequestHeader("Connection", "close");
		req.send(params);
		return pass;
	}
	</script>
</head>
	<body>
		<form enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
			<div id="moreImages"></div>
			<label>Upload Image:</label>
			<input type="file" name="img" id="img" /><button id="plus" onclick="addMoreImages()">+</button><br />
			<label for="alb">Album</label>
			<?php echo displayAlbumNames($albums);?><br />
			<label for="descr">Description(optional)</label>
			<input type="text" name="descr" id="descr" /><br />
			<input type="submit" value="Upload" name="uploadImg" />
		</form>	
	</body>
</html>

	